<template>
  <!--  <div :id="echartsId" :style="{width: this.pcMobile == 1 ? '600px' : '370px'}" style="height:300px;"></div>-->
  <!--  :style="{width: this.pcMobile == 1 ? '600px' : '370px'}"-->
  <div class="titleBox">
    <div class="rowBox">
      <div>总学生人数</div>
      <div>
        <span class="numText">{{ detailsData.total }}</span>
        <span class="numCompany">人</span>
      </div>
    </div>
    <div class="rowBox">
      <div>完成人数</div>
      <div class="numText">
        <span class="numText">{{ detailsData.finish_num }}</span>
        <span class="numCompany">人</span>
      </div>
    </div>
    <div class="rowBox" >
      <div>当日完成数</div>
      <div>
        <span class="numText">{{ detailsData.count_today }}</span>
        <span class="numCompany">人</span>
      </div>
    </div>
    <div class="rowBox" style="margin-right: 0">
      <div>需关注人数</div>
      <div>
        <span class="numText">{{ detailsData.attentionRequired }}</span>
        <span class="numCompany">人</span>
      </div>
    </div>
  </div>
</template>

<script>
import {statisticPeopleCount} from '@/api/platform/templateManage'
import {getStore} from '@/util/store'

export default {
  props: {
    type: {
      type: String,
      default: ''
    },
    filterCondition: {
      type: Object,
      default: () => {
        return {};
      }
    },


  },
  data() {
    return {
      pcMobile: '1', // 1 PC端，2 移动端
      detailsData: {},
      aa:{},
    }
  },
  mounted() {
    this.isMobile()

  },
  methods: {
    isMobile() {
      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
      // 1 PC端，2 移动端
      this.pcMobile = flag ? '2' : '1'
      this.getData(this.filterCondition)
    },
    getData(filterCondition) {
      // 0:省教育局， 1：市教育局，2：县教育局，3：校长 4：年级组长 5：班主任
      let newUserInfo = getStore({name: 'newUserInfo'})
      let params = {}
      console.log('type:',this.type,newUserInfo)
      if (this.type == 0) {
        params.provinceCode = newUserInfo.provinceCode
      } else if (this.type == 1) {
        params.provinceCode = newUserInfo.provinceCode
        params.cityCode = newUserInfo.cityCode
      } else if (this.type == 2) {
        params.provinceCode = newUserInfo.provinceCode
        params.cityCode = newUserInfo.cityCode
        params.areaCode = newUserInfo.areaCode
      } else if (this.type == 3) {
        params.provinceCode = newUserInfo.provinceCode
        params.cityCode = newUserInfo.cityCode
        params.areaCode = newUserInfo.areaCode
        params.xxId = newUserInfo.xxId
      } else if (this.type == 4) {
        params.provinceCode = newUserInfo.provinceCode
        params.cityCode = newUserInfo.cityCode
        params.areaCode = newUserInfo.areaCode
        params.xxId = newUserInfo.xxId
        params.njId = newUserInfo.njId
      } else if (this.type == 5) {
        params.provinceCode = newUserInfo.provinceCode
        params.cityCode = newUserInfo.cityCode
        params.areaCode = newUserInfo.areaCode
        params.xxId = newUserInfo.xxId
        params.njId = newUserInfo.njId
        params.bjId = newUserInfo.bjId
      }
      params.filterCondition = filterCondition
      statisticPeopleCount(params).then(res => {
        if (res.data.code === 200) {
          this.detailsData = res.data.data
          console.log(res.data)

        }
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.titleBox {
  //height: 230px;
  //margin-top: 15px;
  //text-align: center;
  width: 100%;
  display: flex;

  .rowBox {
    width: 23%;
    height: 100px;
    background: #FFFFFF;
    box-shadow: 0 4px 16px 0 #0000001a;
    border-radius: 6px;
    margin-right: 8px;
    font-size: 16px;
    padding-top: 40px;
    text-align: center;
    //line-height: 140px;
    font-weight: 400;

    .numText {
      font-weight: 700;
      font-size: 28px;
      color: #0DBF8D;
    }

    .numCompany {
      font-weight: 400;
      font-size: 14px;
      color: #989AA1;
    }
  }

  .rowTitle {
    font-size: 24px;
    font-weight: 600
  }

  .row {
    font-size: 18px;
    font-weight: 500;
    margin-top: 10px
  }
}

</style>
